import React, {Component} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {TabNavigator,} from 'react-navigation';
import VideoChildren from '../children_page/VideoChildren';
import TVideoChildren from '../children_page/TVideoChildren';
import DocumentaryVideo from '../children_page/DocumentaryVideo';

const Navigator = TabNavigator({
  VideoChildren:{
    screen:VideoChildren,
    navigationOptions:({navigation})=>({
      tabBarLabel:'一周新闻',
    }),
  },
  TVideoChildren:{
    screen:TVideoChildren,
    navigationOptions:({navigation})=>({
      tabBarLabel:'电视专题',
    }),
  },
  DocumentaryVideo:{
    screen:DocumentaryVideo,
    navigationOptions:({navigation})=>({
      tabBarLabel:'全城纪实',
    }),
  },
},{
  tabBarPosition: 'top',
  lazy: true, // 是否懒加载  
  initialRouteName: 'VideoChildren',
  tabBarOptions:{
    style: {  
      backgroundColor: '#ffffff',  
      height:50
    },  
    labelStyle: {  
      fontSize: 16, 
      fontWeight:'bold',
      fontFamily:'scratchmyback'
    }, 
    activeTintColor: '#AC1E1A',//label和icon的前景色 活跃状态下（选中）
    inactiveTintColor: '#000000',//label和icon的前景色 活跃状态下（未选中）
    indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
      backgroundColor: '#AC1E1A',
    }
  }  
});
export default class Video extends Component {
  static navigationOptions = {
    headerBackTitle: null,
    header:null,
    headerTintColor: '#333333',
    gesturesEnabled:true
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
          <View style={styles.top_view}>
            <Image resizeMode={'contain'} source={{ uri: 'icon_logo' }} style={{ height: 30, width: 30 }} />
            <Text style={{ flex: 1, textAlign: 'center', marginLeft: -40, fontSize: 18, fontWeight: 'bold', fontFamily: 'scratchmyback', color: '#000' }}>师大影像</Text>
          </View>
          <Navigator style={{ flex: 1 }}/>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  welcome: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  top_view:{
    flexDirection: 'row',
    padding: 10,
    alignItems:'center',
    backgroundColor:'#fff',
    elevation:1
  }
});
